<template>
    <div class="login">
        <div class="anim-wrap">
            <img class="ani ani-1" src="@/assets/images/a1.png" style="width: 585px;left: 160px;bottom:100px">
            <img class="ani ani-2" src="@/assets/images/a2.png" style="width: 319px;right: 400px;top:1px">
            <img class="ani ani-3" src="@/assets/images/a3.png" style="width: 194.5px;right: 380px;bottom:200px">
            <img class="ani ani-4" src="@/assets/images/a4.png" style="width: 184px;right: 180px;bottom:160px">
            <img class="ani ani-5" src="@/assets/images/a5.png" style="width: 162px;left: 300px;top:260px">
            <img class="ani ani-6" src="@/assets/images/a6.png" style="width: 69px;right: 0px;top:0px">
            <img class="ani ani-7" src="@/assets/images/a7.png" style="width: 296px;left: 0px;top:100px">
            <img class="ani ani-8" src="@/assets/images/a8.png" style="width: 425px;left: 180px;top:0px">
            <img class="ani ani-9" src="@/assets/images/a9.png" style="width: 314px;right: 100px;top:100px">
            <img class="ani ani-10" src="@/assets/images/a10.png" style="width: 247px;left: -40px;bottom:60px">
        </div>
        <div class="login-content">
            <div class="login-title">MASTER</div>
            <div class="login-input">
                <div class="login-list">
                    <p>{{$t("l.text")}}</p>
                    <input type="password" v-model="password" :placeholder="this.$t('l.passwordPlacholder')">
                </div>
                <div class="login-list">
                    <button @click="login">{{$t("l.login")}}</button>
                </div>
            </div>
            <div class="login-bottom">{{$t("l.noAccount")}}？<router-link to="/register">{{$t("l.register")}}</router-link> </div>
        </div>
    </div>
</template>
<script>
  import {login} from '../../service/loginService'
  import {VerifyPassword} from '../../utils/commonUtils'

  export default{
    data(){
        return{
          password:''
        }
    },
    created(){
        
    },
    mounted(){
        setTimeout(()=>{
            console.log(this.$route)
        },1000)
        
    },
    methods:{
      login(){
        if (VerifyPassword(this.password)) {
            let status = login(this.password);
            if (status) {
              this.$router.push({path: '/'});
            } else {
              this.$message.error('登录失败');
            }
        } else {
          this.$message.error('请输入不少于8位的26大小写字母或0-9数字');
        }
      }
    }

}
</script>
<style lang="less" scoped>
@import url('../../assets/css/anim.css');
.login{
    position: relative;
    background: #000;
    min-height: 1100px;
    width: 100%;
    overflow: hidden;
    .anim-wrap{
        position: absolute;
        z-index: 1;
        left: 50%;
        top: 50%;
        img{
            position: absolute;
            max-width: 1000px;
        }
    }
    &:before{
        content: ' ';
        position: absolute;
        z-index: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover !important;
        background-image: url('../../assets/images/bg-home.jpg');
    }
    .login-content{
        width: 500px;
        min-height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        z-index: 100;
        .login-title{
            height: 78px;
            background-color: #98889b;
            font-size: 36px;
            text-align: center;
            line-height: 78px;
            color: #fff;
        }
        .login-input{
            padding: 30px 20px;
            .login-list{
                padding: 15px 0;
                p{
                   font-size: 14px; 
                   color: #666666;
                   padding: 12px 0;
                }
                input{
                    font-size: 12px;
                    border-radius: 4px;
                    border: solid 1px #ddd;
                    width: 100%;
                    padding: 0 15px;
                    height: 34px;
                    outline: none;
                }
                button{
                    border-radius: 4px;
                    border: none;
                    background-color: #98889b;
                    width: 100%;
                    height: 41px;
                    font-size: 14px;
                    color: #fff;
                    outline: none;
                    cursor: pointer;
                }
            }
        }
        .login-bottom{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            background-color: #efefef;
            font-size: 12px;
            a{
                color: #98889b;
            }
        }
        
    }
}
</style>

